<!-- 头部右侧 -->
<template>
  <a-space :size="25">
    <Message />
    <a-tooltip :title="isFull ? '点击退出全屏模式' : '点击切换全屏模式'">
      <a-button
        v-if="!isFull"
        @click="changeScreen"
        shape="circle"
        class="right-btn"
      >
        <svg-icon name="screen" color="#707070" width="11px" height="11px" />
      </a-button>
      <a-button v-else @click="changeScreen" shape="circle" class="right-btn">
        <svg-icon name="unscreen" color="#707070" width="11px" height="11px" />
      </a-button>
    </a-tooltip>
    <a-tooltip title="刷新页面">
      <a-button @click="doRefresh" shape="circle" class="right-btn">
        <svg-icon name="refresh" color="#707070" width="13px" height="13px" />
      </a-button>
    </a-tooltip>
    <a-dropdown :trigger="['click']" placement="bottom">
      <a-space :size="10">
        <svg-icon name="man" width="37px" height="37px" />
        <span>{{ userStore.user.username }}</span>
        <DownOutlined />
      </a-space>
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <a-button type="text" size="small">
              <UserOutlined />
              个人中心
            </a-button>
          </a-menu-item>
          <a-menu-item @click="logout">
            <a-button type="text" size="small">
              <LogoutOutlined />
              退出登录
            </a-button>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </a-space>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRefreshStore } from "@/stores/models/refresh";
import useUserStore from "@/stores/models/user";
import screenfull from "screenfull";
import { doLogout } from "@/api/user";
import { message } from "ant-design-vue";
import { useBreadcrumbStore } from "@/stores/models/breadcrumb";
import Message from "@/components/common/right/msg/Index.vue";
import { useThemeStore } from "@/stores/models/theme";

const themeStore = useThemeStore();
const breadcrumbStore = useBreadcrumbStore();
const useRefresh = useRefreshStore();
const userStore = useUserStore();

//刷新标志进行本地存储
const doRefresh = () => {
  useRefresh.refresh = !useRefresh.refresh;
};

//全屏
const isFull = ref(false);
const changeScreen = () => {
  if (screenfull.isEnabled) {
    //可以来回切换全屏/非全屏
    isFull.value = !isFull.value;
    screenfull.toggle();
  } else {
    message.info("您的浏览器不支持全屏！");
  }
};

//退出登录
const logout = () => {
  doLogout().then((res) => {
    if (res.code === 200) {
      userStore.logout();
      breadcrumbStore.removeBreadcrumb();
      message.success("退出成功！");
    }
  });
};
</script>
<style scoped lang='scss'>
.right-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.ant-divider-horizontal) {
  margin: 6px 0 6px 0;
}

:deep(.ant-divider-vertical) {
  margin: 0;
}

h3 {
  margin-top: 30px;
  font-weight: 600;
  font-size: 14px;
}
</style>